<template>
  <div class="ele-body ele-body-card">
    <a-card title="打印当前页面" :bordered="false">
      <div style="margin-bottom: 16px;">支持IE浏览器打印预览</div>
      <a-space>
        <a-button @click="print({})">打印当前页面</a-button>
        <a-button @click="print({horizontal:true})">横屏打印</a-button>
        <a-button @click="print({blank:true})">新窗口打印</a-button>
        <a-button @click="print({hide:['.demo-hide-1']})">打印时隐藏指定内容</a-button>
      </a-space>
      <div style="margin-top: 16px;">
        <span class="ele-text-danger ele-printer-hide">此段内容会在所有打印时自动隐藏，打印完自动复原。</span>
        <span class="ele-text-primary demo-hide-1">此段内容在指定打印时才隐藏。</span>
      </div>
    </a-card>
    <a-card title="打印任意内容" :bordered="false">
      <a-space>
        <a-button @click="printHtml()">打印任意内容</a-button>
        <a-button @click="printHtml(true)">新窗口打印</a-button>
        <a-button @click="printAddHeader">设置页眉页脚</a-button>
        <a-button @click="printImage">打印图片</a-button>
      </a-space>
    </a-card>
    <a-card title="分页打印" :bordered="false">
      <a-space>
        <a-button @click="printPage()">分页打印</a-button>
        <a-button @click="printPage(true)">新窗口分页打印</a-button>
        <a-button @click="printPageAddHeader">分页打印设置页眉页脚</a-button>
      </a-space>
    </a-card>
    <a-card title="进阶示例" :bordered="false">
      <a-space>
        <a-button @click="printDataTable">打印数据表格</a-button>
        <a-tooltip title="对于复杂的打印需求，可以后端生成pdf给前端打印">
          <a-button @click="printPdf">打印pdf</a-button>
        </a-tooltip>
        <a-button @click="printQrCode">打印条码</a-button>
        <a-button @click="printTable">打印自定义表格</a-button>
      </a-space>
    </a-card>
  </div>
</template>

<script>
import printer from 'ele-admin-pro/packages/printer.js';

export default {
  name: 'ExtensionPrinter',
  data() {
    return {
      users: [
        {
          key: 1,
          username: '张小三',
          amount: 18,
          province: '浙江',
          city: '杭州',
          zone: '西湖区',
          street: '西溪街道',
          address: '西溪花园30栋1单元',
        },
        {
          key: 2,
          username: '李小四',
          amount: 39,
          province: '江苏',
          city: '苏州',
          zone: '姑苏区',
          street: '丝绸路',
          address: '天墅之城9幢2单元',
        },
        {
          key: 3,
          username: '王小五',
          amount: 8,
          province: '江西',
          city: '南昌',
          zone: '青山湖区',
          street: '艾溪湖办事处',
          address: '中兴和园1幢3单元',
        },
        {
          key: 4,
          username: '赵小六',
          amount: 16,
          province: '福建',
          city: '泉州',
          zone: '丰泽区',
          street: '南洋街道',
          address: '南洋村6幢1单元',
        },
        {
          key: 5,
          username: '孙小七',
          amount: 12,
          province: '湖北',
          city: '武汉',
          zone: '武昌区',
          street: '武昌大道',
          address: '两湖花园16幢2单元',
        },
        {
          key: 6,
          username: '周小八',
          amount: 11,
          province: '安徽',
          city: '黄山',
          zone: '黄山区',
          street: '汤口镇',
          address: '温泉村21号',
        }
      ]
    };
  },
  methods: {
    /* 打印当前页面 */
    print(options) {
      printer.print(options);
    },
    /* 打印任意内容 */
    printHtml(blank) {
      printer.printHtml({
        html: '<h1>Hello! Welcome To EleAdminPro!</h1>',
        blank: blank
      });
    },
    /* 打印设置页眉页脚 */
    printAddHeader() {
      printer.printHtml({
        html: `
          <div style="padding: 0 60px;">
            <h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
            <h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
            <h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
            <h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
            <h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
            <h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
          </div>
        `,
        margin: 0,
        header: `
          <div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
            <span style="float: left;">我是页眉左侧</span>
            <span>我是页眉</span>
            <span style="float: right;">我是页眉右侧</span>
          </div>`,
        footer: `
          <div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
            <span style="float: left;">我是页脚左侧</span>
            <span>我是页脚</span>
            <span style="float: right;">我是页脚右侧</span>
          </div>`
      });
    },
    /* 打印图片 */
    printImage() {
      printer.printHtml({
        html: '<img src="https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg" style="width: 100%;"/>'
      });
    },
    /* 分页打印 */
    printPage(blank) {
      printer.printPage({
        htmls: [
          '<div>我是第一页</div>',
          '<div>我是第二页</div>',
          '<div>我是第三页</div>',
          '<div>我是第四页</div>',
          '<div>我是第五页</div>'
        ],
        style: '<style>div{color: red;}</style>',
        blank: blank
      });
    },
    /* 分页打印设置页眉页脚 */
    printPageAddHeader() {
      printer.printPage({
        htmls: [
          '<span class="ele-printer-num">1/5</span><div>我是第一页</div>',
          '<span class="ele-printer-num">2/5</span><div>我是第二页</div>',
          '<span class="ele-printer-num">3/5</span><div>我是第三页</div>',
          '<span class="ele-printer-num">4/5</span><div>我是第四页</div>',
          '<span class="ele-printer-num">5/5</span><div>我是第五页</div>'
        ],
        margin: 0,
        padding: '30px 60px',
        header: `
          <div style="text-align: center;font-size: 12px;padding: 15px 30px;">
            <span style="float: left;">我是页眉左侧</span>
            <span>我是页眉</span>
            <span style="float: right;">我是页眉右侧</span>
          </div>`,
        footer: `
          <div style="text-align: center;font-size: 12px;padding: 15px 30px;">
            <span style="float: left;">我是页脚左侧</span>
            <span>我是页脚</span>
            <span style="float: right;">我是页脚右侧</span>
          </div>`,
        style: `
          <style>
            .ele-printer-page-item > div { color: red; }
            .ele-printer-num {
                position: absolute;
                top: -35px;
                right: 10px;
                font-size: 12px;
            }
          </style>`
      });
    },
    /* 打印数据表格 */
    printDataTable() {
      let html = printer.makeTable(this.users, [
        [
          {field: 'username', width: 150, rowspan: 2, title: '联系人'},
          {align: 'center', colspan: 3, title: '地址'},
          {field: 'amount', width: 120, rowspan: 2, title: '金额', align: 'center'}
        ],
        [
          {field: 'province', width: 120, title: '省'},
          {field: 'city', width: 120, title: '市'},
          {
            width: 200, title: '区', templet: (d) => {
              return `<span style="color:red;">${d.zone}</span>`;
            }
          }
        ]
      ]);
      printer.printHtml({html: '<p>提供数据和cols配置自动生成复杂表格，非常的方便</p>' + html});
    },
    /* 打印pdf */
    printPdf() {
      printer.printPdf({url: 'https://cdn.eleadmin.com/20200610/20200708224450.pdf'});
    },
    /* 打印条码 */
    printQrCode() {
      let html = `
        <div class="code-group">
          <div class="code-group-title">EasyWeb授权凭证</div>
          <div class="code-group-body">
            <p>手机扫描右侧二维码，或登录</p>
            <p>网站https://easyweb.vip</p>
            <p>查询产品真伪</p>
            <img src="https://cdn.eleadmin.com/20200610/20200708230820.png" width="70px" height="70px"/>
            <span>515AE3X1</span>
          </div>
        </div>
        <style>
          .code-group {
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
          }
          .code-group-title {
            border-bottom: 1px solid #ccc;
            padding: 10px 15px;
            text-align: center;
            font-size: 18px;
          }
          .code-group-body {
            text-align: center;
            position: relative;
            padding: 15px 115px 0 25px;
            min-height: 90px;
          }
          .code-group-body > p {
            margin: 0 0 13px 0;
            font-size: 15px;
            font-family: 幼圆;
            color: #333;
            font-weight: 600;
          }
          .code-group-body > img, .code-group-body > span {
            position: absolute;
            right: 25px;
            top: 15px;
          }
          .code-group-body > span {
            top: 90px;
          }
        </style>
        `;
      printer.printHtml({html: html});
    },
    /* 打印自定义表格 */
    printTable() {
      let html = `
        <h2 style="text-align: center;color: #333;">软工xxxx班课程表</h2>
        <table class="ele-printer-table">
          <colgroup>
            <col width="130px"/>
          </colgroup>
          <tr>
            <th style="position: relative;">
              <span style="position: absolute;right: 20px;top: 10px;line-height: normal;">星期</span>
              <span style="position: absolute;left: 20px;bottom: 10px;line-height: normal;">时间</span>
              <div style="height: 1px; width:140px;background-color: #000;position: absolute;left: 0;top: 0;transform: rotate(21deg);transform-origin: 0 0;"></div>
            </th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
          </tr>
          <tr>
            <td>8:00-10:00</td>
            <td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
            <td>数据库原理及应用<br/>严良 - 716机房</td>
            <td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
            <td></td>
            <td>JavaScript程序设计<br/>董娜 - 733机房</td>
          </tr>
          <tr>
            <td>10:30-12:30</td>
            <td></td>
            <td>JavaScript程序设计<br/>董娜 - 733机房</td>
            <td></td>
            <td>锋利的jQuery<br/>程咏 - 303教室</td>
            <td>JavaEE应用开发<br/>周星 - 303教室</td>
          </tr>
          <tr>
            <td colspan="6" style="height: auto;">午休</td>
          </tr>
          <tr>
            <td>13:30-15:30</td>
            <td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
            <td></td>
            <td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>16:00-18:00</td>
            <td></td>
            <td>JavaEE应用开发<br/>周星 - 303教室</td>
            <td></td>
            <td>数据库原理及应用<br/>严良 - 716机房</td>
            <td></td>
          </tr>
        </table>
        <style>
          th, td {
              text-align: center;
              line-height: 32px;
          }
          td {
              height: 110px;
          }
        </style>
        `;
      printer.printHtml({html: html, horizontal: true});
    }
  }
}
</script>

<style scoped>
.ant-space {
  flex-wrap: wrap;
}

.ant-space .ant-btn {
  margin-bottom: 8px;
}
</style>
